<template>
  <div class="orderDetail_container">
    <div class="top">
      <div @click="changeTitIdx(1)" :style="titIdx == 1 ? 'color: #333;' : ''" class="tit1">广告列表(明细)</div>
      <div @click="changeTitIdx(2)" :style="titIdx == 2 ? 'color: #333;' : ''" class="tit2">广告设计投放</div>
    </div>
    <div @tab-click="handleClick" class="op" v-if="titIdx == 1">
      <!-- <el-tab-pane v-for="(item, index) in recordList" :key="item.title" :label="item.title">
      </el-tab-pane> -->
      <el-card class="box-card itemint" shadow="always" v-for="(item, index) in recordList" :key="index">
        <div class="item1">
          <div class="left">
            <div class="url1">
              <span class="title1">
                广告类型&emsp;
              </span>
              <span v-if="item.type == 1">
                用户广告
                <!-- 开屏广告 -->
              </span>
              <span v-else-if="item.type == 2">
                <!-- 商业 -->
                <span v-if="item.fileType == 1">
                  开屏广告
                </span><span v-else-if="item.fileType == 2">
                  视频广告
                </span>
                <!-- 判断img与mp4
                1img=开屏，
                2mp4=视频
                短视频广告 -->
              </span>
              <span v-else-if="item.type == 3">

                评论广告
              </span>
            </div>
            <div class="url1">
              <span class="title1">
                广告标题
              </span>
              <span>
                {{ item.title }}
              </span>
            </div>
            <div class="url1">
              <span class="title1">
                广告链接
              </span>
              <span class="url">
                {{ item.linkUrl }}
              </span>
            </div>
            <div class="url1">
              <span class="title1">
                广告图片
              </span>
              <el-image class="title-img" :src="$staticURL + item.fileUrl"></el-image>
            </div>
            <div class="url1">
              <!-- 审核图片{{}} -->
            </div>
            <div class="url1">
              <span class="title1">
                投放时间
              </span>
              <span>
                {{ item.createTime }}
              </span>
            </div>

            <div class="url1">
              <span class="title1">
                支付金额
              </span>
              <span>
                {{ item.costMoney }}
              </span>
            </div>
            <div>

              <!-- <button @click="switch (1)"  v-if="item.putStatus == 1">
              
            </button>
            <button @click="switch (2)"  v-else-if="item.putStatus == 2">
              暂停投放
            </button> -->
              <!-- <el-button {{ item.putStatus == 1 ? `暂停投放` : `暂停投放` }}</el-button> -->
              <div v-if="item.putStatus == 2">

                <el-button @click="restore(item.id)" class="btn" type="pink">恢复投放</el-button>
              </div>
              <div v-else-if="item.putStatus == 1">
                <el-button @click="suspend(item.id)" class="btn" type="pink">暂停投放</el-button>
              </div>
            </div>
          </div>
          <div class="right">


            <div>
              <span class="title">
                <!-- status -->

                <img v-if="item.status == 1" src="@/assets/img/mark.png" alt="" />
                <!-- 已通过 -->

                <!-- <img src="@/assets/img/mark_off.png" alt="" /> -->
                <!-- 已结束 -->
                <img v-if="item.status == 0" src="@/assets/img/mark_sh.png" alt="" />
                <!-- 审核中 -->
                <img v-if="item.status == -1" src="@/assets/img/mark_bh.png" alt="" />
                <!-- 已驳回 -->
                <!-- <img src="@/assets/img/mark_tf.png" alt="" /> -->
                <!-- 投放中 -->
                <!-- <img src="@/assets/img/mark_wj.png" alt="" /> -->
                <!-- 违规 -->
              </span>
              <img height="480px" v-if="item.fileType == 2 && item.type == 2" src="@/assets/img/MP4.png">
              <!-- 视频广告 -->
              </img>
              <img height="480px" v-if="item.type == 2 && item.fileType == 1" src="@/assets/img/index.png">
              <!-- 开屏广告 -->
              </img>
              <img height="480px" v-if="item.type == 3" src="@/assets/img/comment.png">
              <!-- 评论广告 -->
              </img>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="type_box" v-else>
      <div style="display: flex;flex-direction: column;align-items: center;">
        <img src="@/assets/img/phone.png">
        <div style="font-size: 30px;color: #333;font-weight: 400;margin-top: 30px;margin-bottom: 60px;">手机端
        </div>
        <div class="btn_box">
          <div class="btn" @click="goPage('phone', 0)">
            开屏广告
          </div>
          <div class="btn" style="margin-left: 30px;" @click="goPage('phone', 1)">
            视频广告
          </div>
          <div class="btn" style="margin-left: 30px;" @click="goPage('phone', 2)">
            评论广告
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import moment from 'moment'


export default {
  name: 'AdvDetails',
  data() {
    return {
      titIdx: 1,
      // formatDate:'',

      recordList: [],

      mList: [{
        sponsorName: '',
        arr: [],
      }],
      mmlist: [],

      active_rule: 0,
      ad_rule: [{
        name: '广告主1',
        id: 1
      }, {
        name: '广告主2',
        id: 2
      }, {
        name: '广告主3',
        id: 3
      }],
      orderList: [{
        name: '广告主1',
        preName: '自治趣故事信息技术',
        type: '电脑端-推荐页动图广告',
        title: '广告标题广告标题',
        link: 'http//www.cucdshcjsp.com',
        picUrl: 'img/mark.png',
        time: '2023-09-20~2023-09-23',
        payType: '微信',
        starTime: '2023-09-20  09:30:36',
        cost: '99.8元',
        linkPic: 'img/linkPic.png',
        open: false,
      }, {
        name: '广告主1',
        preName: '自治趣故事信息技术',
        type: '电脑端-推荐页动图广告',
        title: '广告标题广告标题',
        link: 'http//www.cucdshcjsp.com',
        picUrl: 'img/mark.png',
        time: '2023-09-20~2023-09-23',
        payType: '微信',
        starTime: '2023-09-20  09:30:36',
        cost: '99.8元',
        linkPic: 'img/linkPic.png',
        open: false,
      }, {
        name: '广告主1',
        preName: '自治趣故事信息技术',
        type: '电脑端-推荐页动图广告',
        title: '广告标题广告标题',
        link: 'http//www.cucdshcjsp.com',
        picUrl: 'img/mark.png',
        time: '2023-09-20~2023-09-23',
        payType: '微信',
        starTime: '2023-09-20  09:30:36',
        cost: '99.8元',
        linkPic: 'img/linkPic.png',
        open: false,
      }]
    }
  },
  mounted() {
    this.getSponsorRecordList()
  },
  computed: {
    auditTime: () => {
      return (timestamp, timestamp1) =>
        timestamp - Date.parse(new Date()) / 1000 > 0 ?
          "0" :
          timestamp1 - Date.parse(new Date()) / 1000 < 0 ?
            "2" :
            "1";
    },
  },
  methods: {
    formatDate(timestamp) {
      // 创建一个 Date 对象，传入时间戳（秒数乘以1000转换为毫秒）
      let date = new Date(timestamp * 1000);

      // 获取年、月、日、小时、分钟和秒
      let year = date.getFullYear();
      let month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始，所以要加1，并补零
      let day = ('0' + date.getDate()).slice(-2); // 补零
      let hours = ('0' + date.getHours()).slice(-2); // 补零
      let minutes = ('0' + date.getMinutes()).slice(-2); // 补零
      let seconds = ('0' + date.getSeconds()).slice(-2); // 补零

      // 拼接成 YYYY-MM-DD HH:mm:ss 格式的字符串
      let formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      return formattedDate;
    },


    async restore(item) {
      let res = await this.$API.audit.restoreRecord({
        recordId: item
      })
      console.log(res, '恢复');
      this.getSponsorRecordList()
    },
    async suspend(item) {
      let res = await this.$API.audit.stopRecord({
        recordId: item
      })
      console.log(res, '暂停');
      this.getSponsorRecordList()
    },
    goPage(type, index) {
      console.log(type, index, 'typeindex,')

      this.$router.push({
        name: 'AdDetail',
        query: {
          typeAD: index
        }
      })
      
      
    },
    switch(item) {

    },

    changeTitIdx(i) {
      console.log('切换')
      this.titIdx = i
    },
    async deleteSponsorRecord(sponsorRecordId) {
      let res = await this.$API.system.deleteSponsorRecord({
        sponsorRecordId,
      })
      if (res.code == 200) {
        this.$message.success('删除广告记录成功')
        this.recordList = []
        this.getSponsorRecordList()
      } else {
        this.$message(res.code)
      }
    },
    toUrl() {
      this.$router.push({
        name: 'AdDetail',
      })
    },
    dateFormat(row) {
      if (row) {
        return moment(row * 1000).format("YYYY-MM-DD");
      }
    },
    async getSponsorRecordList() {
      this.recordList = []
      let res = await this.$API.system.getLoginUserAdvertisementRecordList()

      this.recordList = res.data
      console.log(res.data, 'res.data');
      console.log(this.recordList, 'this.recordList');
      let arr = res.data
      arr.forEach((i, index) => {
        console.log(i, 'i');

        i.extensionStartTime = this.formatDate(i.extensionStartTime)
        i.extensionEndTime = this.formatDate(i.extensionEndTime)
      })
      // var newArr = [...new Set(arr.map(i => i.sponsorName))]; // 去重的时候需要注意和普通数组不同
      // // console.log(newArr);
      // var list = [];
      // newArr.forEach(i => {
      //   list.push(arr.filter(t => t.sponsorName === i));
      // })
      // var mlist = [];
      // list.forEach((i, index) => {
      //   mlist.push({
      //     sponsorName: newArr[index],
      //     arr: i
      //   })
      // })
      // console.log(mlist);
      // this.mList = mlist

      // let arr1 = arr.filter((item) => {
      //   return item.auditStatus == 1 && this.auditTime(item.extensionStartTime, item.extensionEndTime) == 0 ||
      //     this.auditTime(item.extensionStartTime, item.extensionEndTime) == 1
      // })
      // console.log(arr1, '打印arr1');
      // if (arr1.length > 0) {
      //   this.recordList.push({
      //     title: '正在投放' + '(' + arr1.length + ')',
      //     arr: arr1,
      //     mlist: [],
      //     status: 1
      //   })
      // }

      // let arr2 = arr.filter((item) => {
      //   return item.auditStatus == 0
      // })
      // if (arr2.length > 0) {
      //   this.recordList.push({
      //     title: '正在审核' + '(' + arr2.length + ')',
      //     arr: arr2,
      //     mlist: [],
      //     status: 0
      //   })
      // }

      // let arr3 = arr.filter(item =>
      //   item.auditStatus == 1 && this.auditTime(item.extensionStartTime, item.extensionEndTime) == 2
      // )
      // if (arr3.length > 0) {
      //   this.recordList.push({
      //     title: '投放结束' + '(' + arr3.length + ')',
      //     arr: arr3,
      //     mlist: [],
      //     status: 2
      //   })
      // }

      // let arr4 = arr.filter((item) => {
      //   return item.auditStatus == -1
      // })
      // let arr4 = arr.filter(item => item.auditStatus == -1)
      // if (arr4.length > 0) {
      //   this.recordList.push({
      //     title: '违规驳回' + '(' + arr4.length + ')',
      //     arr: arr4,
      //     mlist: [],
      //     status: -1
      //   })
      // }





      // this.recordList.forEach((record) => {
      //   var newArr = [...new Set(record.arr.map(i => i.sponsorName))];
      //   var list = [];
      //   newArr.forEach(i => {
      //     list.push(record.arr.filter(t => t.sponsorName === i));
      //   })

      //   list.forEach((i, index) => {
      //     record.mlist.push({
      //       sponsorName: newArr[index],
      //       arr: i,
      //     })
      //   })
      // })

      // console.log(this.recordList, 'dayin信息')
      // this.mmlist = this.recordList[0].mlist[0].arr
    },
    handleClick(tab) {
      this.mmlist = this.recordList[tab.index].mlist[0].arr
    },
    changeRule(index, i) {
      this.active_rule = index
      this.mmlist = this.recordList[i].mlist[index].arr
      // console.log(this.mmlist)
    }
  }
}
</script>

<style scoped lang="scss">
// .title {
//   top: -70px;
//   right: -200px;
//   position: absolute;
// }
.title1 {
  white-space: nowrap;
}

// .right {
//   position: relative;
// }
.url {
  display: inline-block;
  height: auto;
  word-wrap: break-word;
  width: 50%;
}

.url1 {
  display: flex;
}

.btn {
  width: 100%;
  background-color: pink;
  color: #FFFFFF
}

.el-card__body {
  width: 100% !important;
}

.itemint {
  justify-content: space-around;
  border-radius: 30px;
  margin-top: 50px;
  display: flex;
}

.itemint>div {
  width: 100%;
}

.itemint {
  ::v-deep .el-card__body {
    width: 100%;
  }
}

.item1 {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.box-cord {
  margin-top: 24px;
}

.title1 {
  margin-right: 180px;
}

.left {
  width: 50%;
}

.left div {
  margin: 30px 0;
  margin-left: 50px;
  font-size: 23px;
}

.orderDetail_container {
  background: #f8f9fb;
  padding: 30px;

  .top {
    display: flex;
    align-items: center;

    .tit1 {
      font-size: 30px;
      color: #666666;
    }

    .tit2 {
      font-size: 30px;
      color: #666666;
      margin-left: 40px;
    }
  }

  .ad_rule_box {
    .ad_rule_btn {
      // background-color: #10a4aa70;
      background-color: rgba(255, 104, 178, 0.44);
      border-radius: 5px;
      color: #fff;
      font-size: 18px;
      font-weight: 400;
      padding: 4px 12px;
      cursor: pointer;
      margin-right: 16px;
    }

    .active_rule {
      // background-color: #10a4aa;
      background-color: #FF68B2;
    }
  }

  .order_box {
    padding: 30px 0;
    flex-wrap: wrap;
    display: flex;

    .order_item {
      width: max-content;
      height: 680px;
      border-radius: 20px;
      // box-shadow: 30px 0 0 0 #d8d8d8;
      position: relative;
      background-color: #fff;
      z-index: 1;
      transition: .4s all;
      margin-bottom: 60px;
      margin-right: 90px;

      .img_box {
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;
        width: 218px;
        height: 218px;

        img {
          position: absolute;
          top: -60px;
          right: -60px;
          z-index: 99;
        }
      }

      .order_left {
        height: 100%;
        padding: 30px;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;

        &>div {
          font-size: 20px;
          font-weight: 400;
          color: #333;
          display: flex;
          align-items: center;
          width: 100%;

          span {
            display: inline-block;
          }

          span:first-child {
            width: 130px;
          }

          span:last-child {
            margin-left: 20px;
          }

          img {
            width: 48px;
            height: 48px;
          }
        }

        .el-button {
          flex: 1;
          height: 44px;
          font-size: 20px;
          margin-top: 20px;
        }
      }

      .order_right {
        padding-right: 30px;

        .right_title {
          font-size: 20px;
          color: #333;
          margin: 30px 0;
        }

        img {
          max-width: 288px;
          // height: 570px;
          z-index: -1;
        }
      }

      .order_open_btn {
        font-size: 30px;
        color: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
        right: -30px;
        z-index: 1;

        .el-icon {
          cursor: pointer;
          transition: .2s all;
        }

        .icon_open {
          transform: rotate(180deg);
        }
      }
    }
  }
}

.title-img {
  width: 50px;
  margin: 0 !important;
}

.btnStop {
  width: 432px;
  height: 44px;
  border-radius: 5px;
  background: rgba(255, 104, 178, 0.4392);
  font-size: 20px;
  color: #FFFFFF !important;
}

.btnAgain {
  width: 216px;
  height: 44px;
  border-radius: 5px;
  // background: rgba(255, 104, 178, 0.4392);
  font-size: 20px;
  // color: #FFFFFF !important;
}



.type_box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  width: 1269px;
  height: 753px;
  border-radius: 20px;
  margin-top: 50px;
}

.type_box>div {
  // background: #10a4aa0d;
  background: rgba(255, 104, 178, 0.05);
  border-radius: 20px;
  flex: 1;
  max-width: 734px;
  min-width: 430px;
  padding: 50px 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.type_box .btn_box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  // margin-left: 20px;
}

.type_box .btn_box .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 146px;
  height: 48px;
  border-radius: 5px;
  background: #FF68B2;
  box-sizing: border-box;
  border: 2px solid #FF68B2;
  font-size: 20px;
  color: #FFFFFF;
  // margin-right: 30px;
}




.flx-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flx-st {
  display: flex;
  // align-items: center;
  justify-content: flex-start;
}

.flx-c {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
